<template>
	<view class="page">
		<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit" :statusType="statusType">
			<template>
				<view class="padding-bottom-100">
					<form class="flowform">
						<view class="formlist inputtext" v-if="$formOperates.read('flowTitle',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>流程标题</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.flowTitle" name="flowTitle" :disabled="judge('flowTitle')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('billNo',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>单号编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.billNo" name="billNo" :disabled="judge('billNo')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="flowUrgent" v-if="$formOperates.read('flowUrgent',formOperatesData)">
							<view class="formgroup">
								<view class="labletitle"><label>紧急程度</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.flowUrgent" name="flowUrgent" placeholder="选择" :disabled="judge('flowUrgent')" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20" v-if="$formOperates.read('customerName',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>客户名称</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.customerName" name="customerName" placeholder="输入客户名称" :disabled="judge('customerName')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('contacts',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>联系人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.contacts" name="contacts" placeholder="输入联系人员" :disabled="judge('contacts')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="salesDate" v-if="$formOperates.read('salesDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>开单日期</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.salesDate" name="salesDate" placeholder="选择" :disabled="judge('salesDate')" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('contactPhone',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>联系电话</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.contactPhone" name="contactPhone" placeholder="输入联系电话" :disabled="judge('contactPhone')" />
								</view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('customerAddres',formOperatesData)">
							<view class="formgroup  padding-17 border-bottom-E3E3E5">
								<view class="labletitletar"><label>客户地址</label><text class="required">*</text></view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="sales.customerAddres" name="customerAddres" maxlength="25" :disabled="judge('customerAddres')" placeholder="输入" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('salesman',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>业务人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.salesman" name="salesman" placeholder="输入业务人员" :disabled="judge('salesman')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('ticketNum',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>发票编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.ticketNum" name="ticketNum" placeholder="输入发票编号" :disabled="judge('ticketNum')" />
								</view>
							</view>
						</view>
							<view class="formlist inputtext" @tap="invoiceType" v-if="$formOperates.read('invoiceType',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>发票类型</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.invoiceType" name="invoiceType" placeholder="选择" :disabled="judge('invoiceType')" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('paymentMethod',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>付款方式</label></view>
								<view class="controlvalue">
									<input type="text" v-model="sales.paymentMethod" name="paymentMethod" placeholder="输入付款方式" :disabled="judge('paymentMethod')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('paymentMoney',formOperatesData)">
							<view class="formgroup">
								<view class="labletitle"><label>付款金额</label><text class="required">*</text></view>
								<view class="controlvalue">
									<input type="digit" v-model="sales.paymentMoney" name="paymentMoney" placeholder="输入付款金额" :disabled="judge('paymentMoney')" />
								</view>
							</view>
						</view>
						<view class="formlist margin-top-20" v-if="$formOperates.read('description',formOperatesData)">
							<view class="formgroup  border-bottom-E3E3E5">
								<view class="labletitletar"><label>开单备注</label></view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="sales.description" name="description" :disabled="judge('description')" placeholder="输入"/>
								</view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('fileJson',formOperatesData)">
							<JNPFUpload v-model="fileList" :fileSize='2' :limit='9'></JNPFUpload>
						</view>
						
						
						
						<!-- #ifndef H5 -->
						<view class="uni-list" v-for="(item, key) in detailproList" :key="key">
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="uni-list" v-for="(item, key) in detailproList" :key="'detailpro'+key">
						<!-- #endif -->
							<view class="formgtitle">
								<view class="formgroup">
									<view class="labletitle font-size24"><label>商品添购({{key+1}})</label></view>
									<view v-if="detailproList.length>1&&isAdd=='add'" class="controlvalue text-align-right font-size24"><text class="color-4869EE" @tap="removeDetailpro(key)">删除</text></view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-goodsName',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>商品名称</label><text class="required">*</text></view>
									<view class="controlvalue">
										<input type="text" name="goodsName" v-model="item.goodsName" placeholder="输入商品名称" :disabled="judge('salesEntry-goodsName')" />
									</view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-specifications',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>规格类型</label></view>
									<view class="controlvalue">
										<input type="text" name="specifications" v-model="item.specifications" placeholder="输入规格类型" :disabled="judge('salesEntry-specifications')" />
									</view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-unit',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>单位</label></view>
									<view class="controlvalue">
										<input type="text" name="unit" v-model="item.unit" placeholder="输入单位" :disabled="judge('salesEntry-unit')" />
									</view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-qty',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>数量</label><text class="required">*</text></view>
									<view class="controlvalue">
										<input type="digit" name="qty" v-model="item.qty" @input="inputVal($event,key)" placeholder="输入数量" :disabled="judge('salesEntry-qty')"/>
									</view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-price',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>单价</label><text class="required">*</text></view>
									<view class="controlvalue">
										<input type="digit" name="price" v-model="item.price" placeholder="输入单价" :disabled="judge('salesEntry-price')" @input="inputVal($event,key)"/>
									</view>
								</view>
							</view>
							<view class="formlist inputtext" v-if="$formOperates.read('salesEntry-amount',formOperatesData)">
								<view class="formgroup border-bottom-E3E3E5">
									<view class="labletitle"><label>金额</label><text class="required">*</text></view>
									<view class="controlvalue">
										<input type="digit" name="amount" v-model="item.amount" placeholder="输入金额" disabled="true"/>
									</view>
								</view>
							</view>
							<view class="formlist" v-if="$formOperates.read('salesEntry-description',formOperatesData)">
								<view class="formgroup  padding-17 border-bottom-E3E3E5">
									<view class="labletitletar"><label>收款摘要</label></view>
									<view class="controlvalue  uni-textarea">
										<textarea v-model="item.description" name="description" maxlength="500" :disabled="judge('salesEntry-description')" placeholder="备注" />
										</view>
								</view>
							</view>
						</view>
						<view v-if="isAdd=='add'" class="formlist inputtext" @tap="addDetailpro">
							<view class="formgroup">
								<view class="second-title color-4869EE"><label class="iconfont icon-jia font-size28"></label>商品添购</view>
							</view>
						</view>
					</form>
					<view class="height-100"></view>
				</view>
			</template>
		</flowbefore>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import graceChecker from '@/common/js/graceChecker.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import flowbefore from '@/components/work/flow-before.vue'
	import config from '@/common/js/config.js'
	let formRule=[
			{name:"flowTitle",checkType:"notnull",checkRule:"",errorMsg:"输入标题"},
			{name:"customerName",checkType:"notnull",checkRule:"",errorMsg:"输入客户名称"},
			{name:"flowUrgent", checkType : "notnull", checkRule:"",  errorMsg:"选择紧急程度"},
			{name:"salesDate", checkType : "notnull", checkRule:"",  errorMsg:"选择开单日期"},
			{name:"contactPhone", checkType : "telPhone", checkRule:"",  errorMsg:"输入合格电话"},
			{name:"paymentMoney", checkType : "money", checkRule:"",  errorMsg:"输入合格金额"},
			{name:"customerAddres", checkType : "string", checkRule:"1,25",  errorMsg:"地址应为1-25个字符"},
		];
	let detailproRule=[
			{name:"goodsName",checkType:"notnull",checkRule:"",errorMsg:"输入商品名称"},
			{name:"qty", checkType : "int", checkRule:"0,8",  errorMsg:"数量应为1-8个字符"},
			{name:"price", checkType : "money", checkRule:"",  errorMsg:"输入合格单价"},
			{name:"amount", checkType : "money", checkRule:"",  errorMsg:"输入合格金额"},
		]
	export default {
		components: {
			wPicker,
			flowbefore,
		},
		data() {
			return {
				mode:'',//底部弹窗分类
				isSearchShow:false,
				disabled:false,//启用
				status:'',//流程状态
				beflows:{
					operstate:"",
					processId:''
				},
				sales:{
					billNo:'',
					flowUrgent:'',
					flowTitle:jnpf.userInfo().realName+'的销售订单',
					salesDate:'',
					invoiceType:'',
					customerAddres:'',
					fileJson:'',
					paymentMoney:'',
					contactPhone:'',
					customerName:''
				},
				detailproList:[],
				fileList:[],
				
				fileJson:[],
				isBtnClicks:false,
				pickerList:[],
				urgentList:[{
					label: "普通",
					value:"1"
				},
				{
					label: "重要",
					value:"2"
				},
				{
					label: "紧急",
					value:"3"
				}],
				invoiceTypeList: [{
						label: "普通发票",
						value:"0"
					},
					{
						label: "专业发票",
						value:"1"
					},
					{
						label: "其他",
						value:"2"
					}
				],
				sopping:config.Resources.common.sopping,
				statusType:'',
				formOperatesData:[],
				isAdd:'',
				F_Status:0
			}
		},
		onLoad(e) {
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			let F_Status = uni.getStorageSync('F_Status')
			this.F_Status = Number(F_Status)
			if(F_Status == 1 || F_Status == 2){
				this.disabled = true;
			}
			/* 工作区进入状态 End*/
			let flowInfo= JSON.parse(e.flowInfo);
			this.beflows.operstate=flowInfo.operstate;
			if(flowInfo.operstate =='add'){
				this.sales.flowId=flowInfo.id;
				this.status = 0;
				uni.setStorageSync('F_Status', 0);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.isAdd = flowInfo.operstate
				this.sales.flowUrgent=helper.getSpinnerNew(this.urgentList,'1');
				helper.ajax({
					url: '/api/system/Base/BillRule/BillNumber/WF_SalesOrderNo',
					success: res => {
						this.sales.billNo=res.data.data;
					}
				});
				this.detailproList.push({
					goodsName:"",
					specifications:'',
					unit:'',
					qty:'',
					price:'',
					amount:'',
					description:''
				});
				this.getOperatesData(flowInfo.id)
			}
			if(flowInfo.operstate=='info'){
				uni.setStorageSync('F_Status', F_Status);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.disabled=flowInfo.disabled;
				this.beflows.processId=flowInfo.id;
				this.status=flowInfo.status;
				if(this.status == 0){
					this.isAdd = 'add'
				}
				helper.ajax({
					url: '/api/workflow/Form/SalesOrder/' + flowInfo.id,
					success: res => {
						let _sales=res.data.data;
						this.sales = _sales;
						this.sales.flowUrgent=helper.getSpinnerNew(this.urgentList,_sales.flowUrgent);
						this.sales.salesDate=helper.toDate(_sales.salesDate, "yyyy-MM-dd HH:mm");
						this.detailproList=_sales.entryList;
						if (_sales.fileJson!="") {
							this.fileList = JSON.parse(_sales.fileJson);
						}
					}
				});
				if(this.status == 0 || this.status == 3){
					this.getOperatesData(flowInfo.flowId)
				}else{
					this.$eventHub.$off('formOperates');
					this.$eventHub.$on('formOperates', (data) => {
						this.formOperatesData = data;
						console.log(this.formOperatesData)
						uni.setStorageSync('formOperatesData', data)
					})
				}
			}
		},
		methods: {
			//判断表单权限可写
			judge(id) {
				return this.statusType == 'backlog' ? this.$formOperates.write(id, this.formOperatesData) : this.F_Status ==
					1 || this.F_Status == 2 ? true : this.$formOperates.write(id, this.formOperatesData)
			},
			getOperatesData(id){
				helper.ajax({
					url: '/api/workflow/Engine/FlowEngine/'+id,
					success: res => {
						let kk = JSON.parse(res.data.data.flowTemplateJson);
						this.formOperatesData = [];
						this.formOperatesData = kk.properties.formOperates
						uni.setStorageSync('formOperatesData',this.formOperatesData)
					}
				});
			},
			flowUrgent(e){
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('flowUrgent')
				if(!isWrite){
					this.pickerList = this.urgentList;
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.sales.flowUrgent = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			salesDate(e){
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('salesDate')
				if(!isWrite){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.sales.salesDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			invoiceType(e){
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('invoiceType')
				this.pickerList = this.invoiceTypeList;
				if(!isWrite){
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.sales.invoiceType = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			inputVal(e,index){
				this.detailproList[index].amount=(this.detailproList[index].qty * this.detailproList[index].price).toFixed(2);
			},
			addDetailpro(){
				this.detailproList.push({
					goodsName:"",
					specifications:'',
					unit:'',
					qty:'',
					price:'',
					amount:'',
					description:''
				});
			},
			removeDetailpro(e){
				if(!this.disabled){
					this.detailproList.splice(e,1);
				}
			},
			submit(e){
				this.sales.fileJson = JSON.stringify(this.fileList)
				let formData=this.sales;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return
				}
				for(let i=0;i<this.detailproList.length;i++ ){
					if (!graceChecker.check(this.detailproList[i], detailproRule)) {
						helper.msg(graceChecker.error);
						return;
					}
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.status = 0;
				let method = "POST";
				let url = "/api/workflow/Form/SalesOrder";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.salesDate = Date.parse(formData.salesDate);
				formData.entryList = this.detailproList;
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
			save(e){
				this.sales.fileJson = JSON.stringify(this.fileList)
				let formData=this.sales;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return
				}
				for(let i=0;i<this.detailproList.length;i++ ){
					if (!graceChecker.check(this.detailproList[i], detailproRule)) {
						helper.msg(graceChecker.error);
						return;
					}
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.status = 1;
				let method = "POST";
				let url = "/api/workflow/Form/SalesOrder";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.salesDate = Date.parse(formData.salesDate);
				formData.entryList = this.detailproList;
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {				
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
			
		},
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
